<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡与动画</title>
    <script src="../vue.global.js"></script>
    <style>
        @keyframes leftToRight {
            0% {
                transform: translateX(-100px);
            }
            50% {
                transform: translateX(-50px);
            }
            0% {
                transform: translateX(0px);
            }
        }

        .animation {
            animation: leftToRight 3s;
        }

        .transition {
            transition: 3s background-color ease-in-out;
        }

        .blue {
            background: blue;
        }

        .green {
            background: green;
        }
    </style>
</head>
<body>
<div id="app"></div>
<script>
    // 过渡、动画
    const app = Vue.createApp({
        data() {
            return {
                animate: {
                    transition:true,
                    blue:true,
                    green:false,
                    animation: false
                },

            }
        },
        methods: {
            handleClick() {
                this.animate.animation = !this.animate.animation
            },
            handleColorChange(){
                this.animate.bllue = ! this.animate.bllue;
                this.animate.green = ! this.animate.green ;
            }

        },
        template: `
          <div>
            <div :class="animate">hello world</div>
            <button @click="handleClick">取反</button>
            <button @click="handleColorChange">改变颜色</button>
          </div>
        `
    });
    const vm = app.mount("#app");
</script>
</body>
</html>